<template>
  <div class='homeWrapper'>
    <top></top>
    <!-- 返回顶部 -->
    <div class="backTopWrapper">
      <div class="backTopCase" v-if="showBackTop" ref="backTopCaseT" @click="handleBackTop()"><i class="icon iconfont icon-huidingbu"></i></div>
    </div>
    <router-view/>
    <Footer class="footerWrapper"></Footer>
  </div>
</template>

<script>
import Top from '@/components/top/top.vue'
import Footer from '@/components/footer/footer.vue'
export default {
  name: 'Home',
  data () {
    return {
      showBackTop: true
    }
  },
  mounted () {
  },
  components: {
    Top,
    Footer
  },
  created () {
  },
  methods: {
    handleBackTop () {
      window.scrollTo(0, 0)
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.homeWrapper {
  .backTopWrapper {
    border 1px solid #EFEFEF
    position fixed
    background-color white
    bottom 120px
    right 0px
    z-index 100
    .backTopCase {
      cursor pointer
      padding 20px 20px
      text-align center
      i {
        font-size 30px
      }
      &:hover {
        color $color-theme
      }
    }
  }
}
</style>
